<template>
  <div class="shop">
    <el-table
      :data="tableData"
      style="width:100%"
      max-height="680"
      :cell-style="tc"
      :header-cell-style="tccolor"
    >
      <el-table-column prop="id" label="ID" ></el-table-column>

      <el-table-column prop="username" label="用户账号" ></el-table-column>
      <el-table-column prop="couponName" label="券名称" ></el-table-column>
      <el-table-column prop="actualAmount" label="支付金额" ></el-table-column>
      <el-table-column prop="quantity" label="购买数量" ></el-table-column>
      <el-table-column prop="rebate_money" label="返红包数" ></el-table-column>
      <el-table-column prop="createdAt" label="购买时间" ></el-table-column>
      <el-table-column prop="settleAt" label="核销时间" ></el-table-column>
      <el-table-column  label="核销状态" >
        <template slot-scope="scope">
          <p class="status—desc" v-if="scope.row.orderStatus == 5">待核销</p>
          <p class="status—desc" v-if="scope.row.orderStatus == 10">已核销</p>
          <p class="status—desc" v-if="scope.row.orderStatus == 20">已过期</p>
        </template>
      </el-table-column>
    </el-table>

    <el-col :span="24">
      <div class="pagination">
        <el-pagination
          background
          @current-change="pageChange"
          :current-page="listQuery.pageNum"
          :page-size="listQuery.pageSize"
          layout="total, prev, pager, next, jumper"
          :total="total"
        ></el-pagination>
      </div>
    </el-col>
  </div>
</template>

<script>
import { couponOrderlist } from "@/api/order";
export default {
  data() {
    return {
      type_id: "",
      page: 1,
      total: 0,
      tableData: [],
      listQuery:{
        pageSize:15,
        pageNum:1,
        orderNo:undefined,
        userName:undefined,
        partnerId:undefined,
        sellerId:undefined,
        keyword:undefined
      }
    };
  },
  mounted() {
    this.type_id = this.$route.query.cid;
    this.listQuery.orderNo = this.$route.query.cid;
    this.getactivityCouponBuyRecordData();
  },
  methods: {
     tc() {
      return "text-align:center; color:#333333; font-size:12px;";
    },
    tccolor() {
      return "text-align:center;background-color:#f5f5f5; font-size:14px;";
    },
    async getactivityCouponBuyRecordData() {
      let res = await couponOrderlist(this.listQuery);
      console.log(res);
      if (res.code === 200) {
        this.tableData = res.data.data;
        this.total = res.data.total;
      }
    },
    pageChange(page) {
      this.page = page;
      this.getactivityCouponBuyRecordData();
    }
  }
};
</script>

<style lang="scss" scoped>
.shop {
  padding: 20px;
  position: relative;
}
p {
  display: inline;
  margin-left: 5px;
}
.lookup {
  color: #f4222d;
  cursor: pointer;
}
.pagination {
  float: right;
}
</style>
